<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        #container {
            width: 400px;
            margin: 0 auto;
        }
        .input, form+a {
            margin: 20px 20px;
            width: 250px;
        }
        .input>label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        .input:last-child {
            text-align: center;
        }
        input[type=text], input[type=password] {
            outline: none;
        }
        input[type=submit], input[type=reset] {
            width: 60px;
        }
        form+a {
            text-decoration: none;
            color: blue;
        }
        .hint {
            margin-left: 20px;
            color: red;
            font-size: 0.8em;
            height: 20px;
        }
        .mobile {
            width: 300px;
        }
        .photo {
            width: 350px;
        }
        .preview {
            margin: 10px 50px;
        }
        .intro {
            width: 720px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>用户注册</h1>
        <hr>
        <form action="/polls/register/" method="post">
            {% csrf_token %}
            <p class="hint">{{ hint }}</p>
            <div class="input">
                <label>用户名：</label>
                <input id="inputname" type="text" name="username" placeholder=4到16位（字母，数字，下划线，减号）" required minlength="2" maxlength="20">
                <span id="nameinfo"></span>
            </div>
            <div class="input">
                <label>密码：</label>
                <input id="password" type="password" name="password">
            </div>
            <div class="input">
                <label>确认密码：</label>
                <input id="password1" type="password" name="repassword" placeholder="请再次输入密码">
                <span id="passwordinfo"></span>
            </div>
            <div class="input mobile">
                <label>手机号：</label>

                <input type="tel" name="tel">
                <input type="button" id="sendBtn" value="发送验证码">

            </div>
            <div class="input">
                <label>验证码：</label>
                <input type="text" name="mobilecode">
            </div>
            <div class="input">
                <input id="submit" type="submit" value="注册">
                <input type="reset" value="重置">
            </div>
        </form>
        <a href="/polls/login">返回登录</a>
    </div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script>
        $(() => {

            var flagname = false;
            var flagpassword = false;

            $('#inputname').blur(function (evt) {
                {#获取文本框内容#}
                var name = $(evt.target).val();
                {#定义正则#}
                var reg = /^[a-zA-Z0-9_]{4,16}$/;
                {#判断内容是否符合正则  test方法#}
                var b = reg.test(name);
                if(b){
                    $.getJSON('/polls/checkName/',{'username':name},json =>{
                        console.log(json)
                        if (json['status'] == 200){
                            $('#nameinfo').html(json.msg).css('color','green');
                            flagname = true;
                        }else {
                            $('#nameinfo').html(json.msg).css('color','red');
                        }
                    })
                }else {
                    $('#nameinfo').html('请输入4到16位（字母，数字，下划线，减号）').css('color','red');
                }
            })



            $('#password1').blur(function () {
                var  password = $('#password').val()
                var password1 = $('#password1').val()
                if(password == password1){
                    $('#passwordinfo').html('密码一致').css('color','green')
                    flagpassword = true
                }else {
                    $('#passwordinfo').html('请保持密码一致').css('color','red')
                }

            })

            {#submit方法中，只有返回Ture才可以提交表单#}
            $('form').submit(function () {
                var name = $('#inputname').val();
                if (!name){
                    $('#nameinfo').html('用户名不能为空').css('color','red');
                }

                var password = $('#password').val();
                if (!password){
                    $('#nameinfo').html('密码不能为空').css('color','red');
                    return false;
                }

            })





            let countdown = 60
            function delaySend(){
                countdown -=1
                if (countdown === 0){
                     $('#sendBtn').val('发送验证码').prop('disabled',false)
                }else{
                    $('#sendBtn').val('发送验证码('+countdown+'s)')
                    setTimeout(delaySend,1000)
                }

            }
            $('#sendBtn').on('click',(evt) => {
                let tel = $(evt.target).prev().val().trim()
                let pattern = /^1[3-9]\d{9}$/
                if (pattern.test=tel){
                    fetch('/polls/mcode/?tel='+tel).then(resp => resp.json()).then(json =>{
                        $(evt.target).prop('disabled',true)
                        if(json.code === 2000){
                            countdown = 60
                            setTimeout(delaySend,1000)
                        }else {
                            alert(json.msg)
                        }
                    })
                }else {
                    alert('无效的手机号码')
                }
            })




        })
    </script>

</body>
</html>